import React, { useEffect, useState, useRef, useLayoutEffect, useContext, useCallback } from 'react';
import { UserContext } from '../contexts/UserContext';
import { io } from 'socket.io-client';
import LocationTester from './LocationTester';
import TcpMonitor from './TcpMonitor';
import dayjs from 'dayjs';
import './Map.css';

const Map = ({ config }) => {
  const { username } = useContext(UserContext);
  const [loading, setLoading] = useState(true);
  const mapContainerRef = useRef(null);
  const mapInstanceRef = useRef(null);
  const socketRef = useRef(null);
  const addressCacheRef = useRef({});
  const [dateRange, setDateRange] = useState(() => {
    const end = new Date();
    const start = new Date(end.getTime() - 24 * 60 * 60 * 1000); // 24小时前
    return {
      start: start.toISOString().slice(0, 16),
      end: end.toISOString().slice(0, 16)
    };
  });
  const [customDateRange, setCustomDateRange] = useState(false);
  const [error, setError] = useState('');

  // 计算时间差的辅助函数
  const timeSince = (date) => {
    const seconds = Math.floor((new Date() - date) / 1000);
    
    let interval = Math.floor(seconds / 31536000);
    if (interval > 1) return `${interval} 年前`;
    
    interval = Math.floor(seconds / 2592000);
    if (interval > 1) return `${interval} 个月前`;
    
    interval = Math.floor(seconds / 86400);
    if (interval > 1) return `${interval} 天前`;
    
    interval = Math.floor(seconds / 3600);
    if (interval > 1) return `${interval} 小时前`;
    
    interval = Math.floor(seconds / 60);
    if (interval > 1) return `${interval} 分钟前`;
    
    if(seconds < 0) return "未来时间";
    
    return "刚刚";
  };

  // 清理地图实例和相关资源
  const cleanupMap = () => {
    console.log('执行地图清理');
    if (mapInstanceRef.current) {
      try {
        // 先移除所有覆盖物
        console.log('清除地图上的所有覆盖物');
        mapInstanceRef.current.clearMap();
        
        // 移除实时位置标记
        if (mapInstanceRef.current.realTimeMarker) {
          try {
            mapInstanceRef.current.remove(mapInstanceRef.current.realTimeMarker);
            mapInstanceRef.current.realTimeMarker = null;
          } catch (err) {
            console.error('移除实时位置标记失败:', err);
          }
        }
        
        // 安全地销毁地图实例
        console.log('销毁地图实例');
        mapInstanceRef.current.destroy();
      } catch (error) {
        console.error('销毁地图实例失败:', error);
      } finally {
        // 确保引用被清空
        console.log('清空地图实例引用');
        mapInstanceRef.current = null;
      }
    } else {
      console.log('地图实例不存在，无需清理');
    }
  };

  // WebSocket 连接初始化
  useEffect(() => {
    if (!username) return;

    try {
      // 创建 WebSocket 连接
      const socket = io(window.location.origin, {
        path: '/socket.io',
        transports: ['websocket', 'polling'],
        reconnection: true,
        reconnectionAttempts: 5,
        reconnectionDelay: 1000
      });

      socket.on('connect', () => {
        console.log('WebSocket 连接成功');
        // 加入用户房间
        socket.emit('join', username);
        console.log(`发送join事件，加入房间: ${username}`);
      });

      socket.on('joined', (data) => {
        console.log('成功加入房间:', data);
      });

      socket.on('newLocation', (data) => {
        console.log('收到新位置:', data);
        if (data.username === username && mapInstanceRef.current) {
          // 更新地图上的位置
          updateLocation(data);
        }
      });

      socket.on('connect_error', (error) => {
        console.error('WebSocket 连接错误:', error);
        setError('实时位置更新连接失败');
      });

      socket.on('error', (error) => {
        console.error('WebSocket 错误:', error);
        setError('实时位置更新出错');
      });

      socketRef.current = socket;

      return () => {
        if (socketRef.current) {
          console.log('断开WebSocket连接');
          socketRef.current.disconnect();
          socketRef.current = null;
        } else {
          console.log('WebSocket连接不存在，无需断开');
        }
      };
    } catch (error) {
      console.error('初始化 WebSocket 失败:', error);
      setError('初始化实时更新失败');
    }
  }, [username]);

  // 更新位置的函数
  const updateLocation = (locationData) => {
    if (!mapInstanceRef.current || !locationData) return;

    try {
      // 清除之前的实时位置标记
      if (mapInstanceRef.current.realTimeMarker) {
        mapInstanceRef.current.remove(mapInstanceRef.current.realTimeMarker);
      }

      // 创建新的标记
      const marker = new window.AMap.Marker({
        position: [locationData.longitude, locationData.latitude],
        icon: new window.AMap.Icon({
          size: new window.AMap.Size(16, 16),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
        }),
        offset: new window.AMap.Pixel(-8, -8),
        zIndex: 100
      });

      // 保存标记引用
      mapInstanceRef.current.realTimeMarker = marker;
      // 添加到地图
      mapInstanceRef.current.add(marker);
      // 将视图中心移动到新位置
      mapInstanceRef.current.setCenter([locationData.longitude, locationData.latitude]);
    } catch (error) {
      console.error('更新位置失败:', error);
    }
  };

  // 初始化地图
  useLayoutEffect(() => {
    // 确保组件已经挂载
    console.log('地图组件挂载，开始准备初始化地图');
    
    let mounted = true;
    let script = null;
    let initTimer = null;

    const initMap = () => {
      if (!mounted || !window.AMap) {
        console.log('初始化地图条件不满足，跳过初始化');
        return;
      }
      
      if (!mapContainerRef.current) {
        console.log('地图容器不存在，跳过初始化');
        return;
      }
      
      console.log('地图脚本加载完成，正在初始化地图实例');
      try {
        // 只有当地图实例已存在时才清理
        if (mapInstanceRef.current) {
          console.log('清理现有地图实例');
        cleanupMap();
        }

        // 检查DOM元素是否仍然在文档中
        if (!document.body.contains(mapContainerRef.current)) {
          console.warn('地图容器已不在DOM中，跳过初始化');
          return;
        }

        // 获取容器的尺寸
        const containerWidth = mapContainerRef.current.clientWidth;
        const containerHeight = mapContainerRef.current.clientHeight;
        
        console.log('开始创建地图实例，容器:', mapContainerRef.current);
        console.log('容器尺寸:', { 宽度: containerWidth, 高度: containerHeight });
        
        // 确保地图容器有正确的尺寸
        if (containerWidth === 0 || containerHeight === 0) {
          console.error('地图容器尺寸为0，强制设置尺寸并重试');
          
          // 强制设置容器尺寸
          mapContainerRef.current.style.width = '100%';
          mapContainerRef.current.style.height = '500px';
          mapContainerRef.current.style.display = 'block';
          
          // 重新获取尺寸
          const newWidth = mapContainerRef.current.clientWidth;
          const newHeight = mapContainerRef.current.clientHeight;
          
          console.log('强制设置后的容器尺寸:', { 宽度: newWidth, 高度: newHeight });
          
          if (newWidth === 0 || newHeight === 0) {
            console.error('强制设置尺寸后仍为0，无法创建地图实例');
            setError('地图容器尺寸错误，请刷新页面重试');
            setLoading(false);
            return;
          }
        }

        // 使用一个临时DIV来测试是否可以创建地图实例
        const testDiv = document.createElement('div');
        testDiv.style.width = '100px';
        testDiv.style.height = '100px';
        testDiv.style.position = 'absolute';
        testDiv.style.top = '-9999px';
        testDiv.style.left = '-9999px';
        document.body.appendChild(testDiv);
        
        console.log('创建测试地图实例');
        try {
          const testMap = new window.AMap.Map(testDiv, {
          zoom: 11,
          center: [116.397428, 39.90923],
          viewMode: '2D'
        });
          
          // 如果测试成功，清理测试实例
          console.log('测试地图实例创建成功，清理测试实例');
          testMap.destroy();
          document.body.removeChild(testDiv);
          
          // 创建实际的地图实例
          console.log('创建实际地图实例');
          const mapInstance = new window.AMap.Map(mapContainerRef.current, {
            zoom: 11,
            center: [116.397428, 39.90923],
            viewMode: '2D',
            resizeEnable: true
          });

        console.log('地图实例创建成功');
          
          // 添加地图加载完成事件
          mapInstance.on('complete', () => {
            console.log('地图渲染完成事件触发');
          });
          
        if (mounted) {
          mapInstanceRef.current = mapInstance;
          setLoading(false);
          }
        } catch (testError) {
          console.error('测试地图实例创建失败:', testError);
          document.body.removeChild(testDiv);
          throw testError;
        }
      } catch (error) {
        console.error('创建地图实例失败:', error);
        setError(`创建地图失败: ${error.message}`);
        if (mounted) {
          setLoading(false);
        }
      }
    };

    const loadMap = () => {
      if (!config?.amapKey) {
        console.error('未提供高德地图 API Key');
        setError('未提供高德地图 API Key');
        setLoading(false);
        return;
      }

      console.log('正在加载高德地图，Key:', config.amapKey);

      // 如果已经加载了 AMap，直接初始化
      if (window.AMap) {
        console.log('AMap已加载，直接初始化地图');
        // 延迟初始化以确保DOM已完全渲染并且容器有尺寸
        setTimeout(initMap, 1000); // 增加延迟时间到1秒
        return;
      }

      // 移除已存在的脚本
      const existingScript = document.getElementById('amap-script');
      if (existingScript) {
        console.log('移除已存在的地图脚本');
        existingScript.remove();
      }

      // 创建新脚本
      script = document.createElement('script');
      script.id = 'amap-script';
      script.src = `https://webapi.amap.com/maps?v=2.0&key=${config.amapKey}&plugin=AMap.Geocoder,AMap.MarkerClusterer`;
      script.async = true;
      
      script.onload = () => {
        // 加载地图插件
        console.log('高德地图脚本加载完成，开始加载插件');
        try {
          if (!window.AMap) {
            console.error('脚本加载完成但AMap对象不存在');
            setError('地图加载失败：AMap对象不存在');
            setLoading(false);
            return;
          }
          
          window.AMap.plugin(['AMap.Geocoder', 'AMap.MarkerClusterer'], () => {
            console.log('高德地图插件加载成功');
            if (mounted) {
              // 延迟初始化以确保DOM已完全渲染并且容器有尺寸
              setTimeout(initMap, 1000); // 增加延迟时间到1秒
              
              // 添加重试机制，如果第一次初始化失败
              initTimer = setTimeout(() => {
                if (mounted && !mapInstanceRef.current) {
                  console.log('第一次初始化可能失败，尝试重新初始化');
                  initMap();
                }
              }, 3000); // 3秒后重试
            }
          });
        } catch (error) {
          console.error('加载地图插件失败:', error);
          setError(`加载地图插件失败: ${error.message}`);
          // 如果插件加载失败，仍然初始化地图
          if (mounted) {
            setTimeout(initMap, 1000);
          }
        }
      };
      script.onerror = (e) => {
        console.error('地图脚本加载失败', e);
        setError('地图脚本加载失败，请检查网络连接');
        if (mounted) {
          setLoading(false);
        }
      };

      document.head.appendChild(script);
    };

    // 使用setTimeout确保DOM已完全渲染
    const timer = setTimeout(() => {
      if (mounted) {
    loadMap();
      }
    }, 100);

    return () => {
      console.log('Map组件卸载，清理资源');
      mounted = false;
      clearTimeout(timer);
      
      // 清理初始化重试计时器
      if (initTimer) {
        clearTimeout(initTimer);
        initTimer = null;
      }
      
      // 只有当地图实例存在时才清理
      if (mapInstanceRef.current) {
        console.log('地图实例存在，执行清理');
      cleanupMap();
      } else {
        console.log('地图实例不存在，跳过清理');
      }
      
      // 移除脚本
      if (script && script.parentNode) {
        try {
          console.log('移除地图脚本');
        script.parentNode.removeChild(script);
        } catch (error) {
          console.error('移除脚本失败:', error);
        }
      }
    };
  }, [config?.amapKey]);

  // 获取和显示位置数据
  const fetchAndDisplayLocations = useCallback(async () => {
    if (!mapInstanceRef.current) {
      console.log('地图实例不存在，跳过查询');
      setError('地图尚未加载完成，请稍后再试');
      return;
    }
    
    // 使用当前登录用户的用户名
    const queryUsername = config?.username || 'admin';
    
    try {
      const params = new URLSearchParams({
        username: queryUsername,
        start: dateRange.start,
        end: dateRange.end
        // 移除 range 参数，只使用 start 和 end
      });

      console.log('正在查询位置数据:', {
        username: queryUsername,
        timeRange: dateRange,
        url: `/api/locations?${params.toString()}`
      });

      setLoading(true);
      setError('');

      const response = await fetch(`/api/locations?${params}`);
      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`获取位置数据失败: ${response.status} ${response.statusText}\n${errorText}`);
      }

      const data = await response.json();
      console.log('查询结果:', {
        总数: data.length,
        查询参数: {
          用户名: queryUsername,
          开始时间: dateRange.start,
          结束时间: dateRange.end
        },
      第一条: data.length > 0 ? data[0] : null,
      最后一条: data.length > 0 ? data[data.length - 1] : null
      });
      
      // 再次检查地图实例是否存在
      if (!mapInstanceRef.current) {
        console.log('地图实例已被清理，跳过显示');
      setLoading(false); // 确保加载状态被重置
      setError('地图实例已被清理，请刷新页面重试');
        return;
      }

      // 清除旧的标记
      console.log('清除地图上的旧标记');
      mapInstanceRef.current.clearMap();
    
    // 创建一个数组来存储所有的覆盖物
    const allOverlays = [];

      if (data.length > 0) {
      console.log('开始在地图上显示轨迹，数据点数量:', data.length);
      
      // 添加所有点的标记
      const markers = [];
      data.forEach((loc, index) => {
        console.log(`处理第${index+1}个点:`, loc);
        
        // 为每个点创建自定义图标
        let iconUrl;
        if (index === 0) {
          // 起点图标
          iconUrl = 'https://webapi.amap.com/theme/v1.3/markers/n/start.png';
        } else if (index === data.length - 1) {
          // 终点图标
          iconUrl = 'https://webapi.amap.com/theme/v1.3/markers/n/end.png';
        } else {
          // 中间点图标
          iconUrl = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png';
        }
        
        // 为每个点添加标记
        const marker = new window.AMap.Marker({
          position: [loc.longitude, loc.latitude],
          map: mapInstanceRef.current,
          title: `点 ${index+1}: ${new Date(loc.timestamp).toLocaleString()}`,
          icon: new window.AMap.Icon({
            size: new window.AMap.Size(16, 16),
            imageSize: new window.AMap.Size(16, 16),
            image: iconUrl
          }),
          offset: new window.AMap.Pixel(-8, -16),
          zIndex: 50,  // 确保标记在最上层
          visible: true, // 确保标记可见
          label: {
            content: `<div class='marker-label'>${index+1}</div>`,
            direction: 'top'
          }
        });
        
        // 确保标记被添加到地图上
        mapInstanceRef.current.add(marker);
        
        console.log(`添加标记点 ${index+1}:`, [loc.longitude, loc.latitude]);
        
        // 添加信息窗体
        const info = new window.AMap.InfoWindow({
          content: `<div class="custom-info-window">
            <h4>位置详情 <span class="point-index">#${index+1}</span></h4>
            <p><strong><i class="icon-user"></i> 用户:</strong> ${loc.username}</p>
            <p><strong><i class="icon-time"></i> 时间:</strong> ${new Date(loc.timestamp).toLocaleString()}</p>
            <p><strong><i class="icon-location"></i> 坐标:</strong> 
              <span class="coordinates">${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}</span>
            </p>
            <div id="address-${index}" class="address-loading">
              <div class="loading-spinner"></div>
              <span>正在加载地址信息...</span>
            </div>
            <div class="info-footer">
              <span class="timestamp-info">记录于 ${timeSince(new Date(loc.timestamp))}</span>
            </div>
          </div>`,
          offset: new window.AMap.Pixel(0, -30),
          closeWhenClickMap: true
        });
        
        // 点击标记时显示信息窗体并查询地址
        marker.on('click', () => {
          info.open(mapInstanceRef.current, marker.getPosition());
          
          // 使用高德地图逆地理编码服务查询地址
          if (window.AMap && window.AMap.Geocoder) {
            // 创建坐标的唯一键
            const coordKey = `${loc.longitude.toFixed(6)},${loc.latitude.toFixed(6)}`;
            const addressElement = document.getElementById(`address-${index}`);
            
            // 检查缓存中是否已有此位置的地址信息
            if (addressCacheRef.current[coordKey]) {
              console.log(`使用缓存的地址信息: ${coordKey}`);
              if (addressElement) {
                addressElement.innerHTML = addressCacheRef.current[coordKey];
              }
              return;
            }
            
            // 创建逆地理编码实例
            const geocoder = new window.AMap.Geocoder({
              radius: 50, // 减小查询范围
              extensions: "base" // 只返回基本地址信息，不返回POI
            });
            
            // 执行逆地理编码查询
            geocoder.getAddress([loc.longitude, loc.latitude], (status, result) => {
              if (addressElement) {
                let addressHtml = '';
                
                if (status === 'complete' && result.info === 'OK') {
                  // 查询成功，显示地址信息
                  const address = result.regeocode.formattedAddress;
                  const addressDetail = result.regeocode.addressComponent;
                  
                  // 构建详细地址信息
                  let detailHtml = '';
                  
                  if (addressDetail) {
                    detailHtml = `
                      <div class="address-details">
                        <div class="address-main">${address}</div>
                        <div class="address-components">
                          <span class="address-component">${addressDetail.province || ''}</span>
                          <span class="address-component">${addressDetail.city || ''}</span>
                          <span class="address-component">${addressDetail.district || ''}</span>
                          <span class="address-component">${addressDetail.township || ''}</span>
                        </div>
                        ${addressDetail.streetNumber ? 
                          `<div class="street-info">
                            <i class="icon-street"></i> ${addressDetail.street || ''} ${addressDetail.streetNumber || ''}
                          </div>` : ''
                        }
                      </div>
                    `;
                  }
                  
                  addressHtml = `
                    <div class="address-info">
                      <h5><i class="icon-address"></i> 地址信息</h5>
                      ${detailHtml}
                    </div>
                  `;
                  
                  console.log(`位置${index+1}的地址:`, {
                    完整地址: address,
                    详细信息: addressDetail
                  });
                } else {
                  // 查询失败
                  addressHtml = `
                    <div class="address-error">
                      <i class="icon-error"></i> 无法获取地址信息
                    </div>
                  `;
                  console.error('逆地理编码查询失败:', status);
                }
                
                // 更新DOM
                addressElement.innerHTML = addressHtml;
                
                // 缓存查询结果
                addressCacheRef.current[coordKey] = addressHtml;
              }
            });
          } else {
            console.error('高德地图逆地理编码服务不可用');
            const addressElement = document.getElementById(`address-${index}`);
            if (addressElement) {
              addressElement.innerHTML = '<strong>地址:</strong> 逆地理编码服务未加载';
            }
          }
        });
        
        markers.push(marker);
      });
      
      // 如果有多个点，则添加轨迹线
      if (data.length > 1) {
        console.log('添加轨迹线');
        const path = data.map(loc => [loc.longitude, loc.latitude]);
        console.log('轨迹路径点:', path);
        
        try {
          // 创建带箭头的轨迹线
        const polyline = new window.AMap.Polyline({
          path,
            isOutline: true,
            outlineColor: '#ffffff',
            borderWeight: 1,
          strokeColor: "#3366FF",
          strokeWeight: 6,
            strokeOpacity: 0.8,
            // 添加箭头指示方向
            showDir: true,
            dirColor: '#ffffff',
            strokeStyle: 'solid',
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 40
          });
          
          // 确保轨迹线添加到地图上
        mapInstanceRef.current.add(polyline);
          console.log('轨迹线已添加到地图');
          
          // 将轨迹线添加到覆盖物数组
          allOverlays.push(polyline);
        } catch (error) {
          console.error('创建轨迹线失败:', error);
        }
        
        // 在轨迹线上添加方向标记
        const lineLength = path.length;
        if (lineLength >= 3) {
          // 在轨迹中间位置添加方向箭头标记
          for (let i = 1; i < lineLength - 1; i += Math.max(1, Math.floor(lineLength / 5))) {
            try {
              const currentPoint = path[i];
              const nextPoint = path[i + 1];
              
              // 计算方向角度
              const angle = Math.atan2(
                nextPoint[1] - currentPoint[1],
                nextPoint[0] - currentPoint[0]
              ) * 180 / Math.PI;
              
              // 创建方向标记
              const dirMarker = new window.AMap.Marker({
                position: currentPoint,
                map: mapInstanceRef.current,
                icon: new window.AMap.Icon({
                  size: new window.AMap.Size(12, 12),
                  imageSize: new window.AMap.Size(12, 12),
                  image: 'https://webapi.amap.com/theme/v1.3/markers/n/dir.png'
                }),
                offset: new window.AMap.Pixel(-6, -6),
                angle: angle, // 设置角度
                zIndex: 90
              });
              
              // 将方向标记添加到覆盖物数组
              allOverlays.push(dirMarker);
            } catch (error) {
              console.error('创建方向标记失败:', error);
            }
          }
        }

        const startPoint = data[0];
        const endPoint = data[data.length - 1];
        console.log('起点和终点:', {
          起点: [startPoint.longitude, startPoint.latitude],
          终点: [endPoint.longitude, endPoint.latitude]
        });
      } else {
        console.log('只有一个点，不添加轨迹线');
      }

      // 调整视野以包含所有点
      console.log('调整地图视野以显示所有点');
      if (markers.length > 0) {
        console.log(`设置地图视野，包含 ${markers.length} 个标记点`);
        // 确保所有标记都添加到地图上
        mapInstanceRef.current.add(markers);
        // 调整视野以适应所有标记
        mapInstanceRef.current.setFitView(markers);
        
        // 将所有覆盖物添加到数组中，防止被清除
        allOverlays.push(...markers);
      }
      } else {
        console.log('没有找到位置数据');
        setError('该时间范围内没有位置数据');
      }
    } catch (error) {
      console.error('获取或显示位置数据失败:', error);
      setError(`获取位置数据失败: ${error.message}`);
    } finally {
      setLoading(false);
    }
  }, [mapInstanceRef, dateRange, config?.username, setError, setLoading]);

  // 使用useEffect调用fetchAndDisplayLocations
  useEffect(() => {
    if (mapInstanceRef.current) {
      // 只有在非自定义时间范围模式下才自动查询
      if (!customDateRange) {
        console.log('自动查询位置数据');
        fetchAndDisplayLocations();
      } else {
        console.log('自定义时间范围模式，需要手动点击查询按钮');
      }
    }
  }, [mapInstanceRef, customDateRange, fetchAndDisplayLocations]);

  // 处理快捷日期选择
  const handleQuickDateSelect = (days) => {
    // 修改: 切换到实际时间模式，或保留测试模式
    const isFutureData = false; // 修改为false使用当前实际时间
    
    let now, end, start;
    
    // 使用dayjs处理时间
    if (isFutureData) {
      // 测试模式: 使用2025年6月的数据
      now = dayjs('2025-06-16T23:59:59');
      end = now.format('YYYY-MM-DDTHH:mm');
      start = now.subtract(days, 'hour').format('YYYY-MM-DDTHH:mm');
    } else {
      // 正常模式: 使用当前时间
      now = dayjs();
      end = now.format('YYYY-MM-DDTHH:mm');
      start = now.subtract(days, 'hour').format('YYYY-MM-DDTHH:mm');
    }
    
    console.log('设置时间范围:', {
      开始: start,
      结束: end,
      小时数: days,
      是否查询未来数据: isFutureData
    });

    setDateRange({
      start: start,
      end: end
    });
    setCustomDateRange(false);
    
    // 不需要手动调用fetchAndDisplayLocations，
    // 因为setDateRange和setCustomDateRange会触发useEffect
  };

  // 处理日期范围变化
  const handleDateRangeChange = (e) => {
    const { name, value } = e.target;
    setDateRange(prev => {
      const newRange = {
        ...prev,
        [name]: value
      };
      console.log('自定义时间范围变更:', newRange);
      return newRange;
    });
  };

  // 确保组件卸载时清理所有资源
  useEffect(() => {
    return () => {
      console.log('Map组件最终清理');
      // 确保WebSocket连接被关闭
      if (socketRef.current) {
        console.log('确保WebSocket连接被关闭');
        socketRef.current.disconnect();
        socketRef.current = null;
      }
      
      // 确保地图实例被销毁
      if (mapInstanceRef.current) {
        console.log('确保地图实例被销毁');
        try {
          mapInstanceRef.current.destroy();
        } catch (error) {
          console.error('销毁地图实例失败:', error);
        }
        mapInstanceRef.current = null;
      }
    };
  }, []);

  return (
    <div className="map-page">
      <div className="controls-container">
        <div className="date-range-controls">
          <div className="quick-date-buttons">
            <button 
              type="button"
              className={`quick-date-button ${!customDateRange && dateRange.start.includes('T') ? 'active' : ''}`}
              onClick={() => handleQuickDateSelect(1)}
            >
              最近1小时
            </button>
            <button 
              type="button"
              className={`quick-date-button ${!customDateRange && dateRange.start.includes('T23') ? 'active' : ''}`}
              onClick={() => handleQuickDateSelect(24)}
            >
              最近24小时
            </button>
            <button 
              type="button"
              className={`quick-date-button ${!customDateRange && dateRange.start.includes('T00') ? 'active' : ''}`}
              onClick={() => handleQuickDateSelect(7*24)}
            >
              最近7天
            </button>
            <button 
              type="button"
              className={`quick-date-button ${customDateRange ? 'active' : ''}`}
              onClick={() => setCustomDateRange(true)}
            >
              自定义
            </button>
          </div>
          
          {customDateRange && (
            <div className="custom-date-range">
              <input
                type="datetime-local"
                name="start"
                value={dateRange.start}
                onChange={handleDateRangeChange}
                className="date-input"
              />
              <span>至</span>
              <input
                type="datetime-local"
                name="end"
                value={dateRange.end}
                onChange={handleDateRangeChange}
                className="date-input"
              />
              <button 
                className="search-button"
                onClick={() => fetchAndDisplayLocations()}
              >
                查询
              </button>
            </div>
          )}
        </div>
      </div>
      
      {/* 地图容器 */}
      <div className="map-container" ref={mapContainerRef}>
        {loading && <div className="loading-overlay">地图加载中...</div>}
        {error && <div className="error-message">{error}</div>}
      </div>
      
      {/* 工具面板，放在地图下方 */}
      <div className="tools-panel">
        <div className="tools-panel-column">
          <LocationTester />
        </div>
        <div className="tools-panel-column">
          <TcpMonitor />
        </div>
      </div>
    </div>
  );
};

export default Map; 